<!DOCTYPE html>

<html>
<head>
    <title>Tests for background gradients</title>

    <!--[if IE 9]><script src="../build/PIE_IE9_uncompressed.js"></script><![endif]-->
    <!--[if lt IE 9]><script src="../build/PIE_IE678_uncompressed.js"></script><![endif]-->

    <style type="text/css">

        .test {
            float: left;
            padding: 10px;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
            border: 3px solid;
            margin: 5px;
        }

    </style>
</head>
<body>

    <div style="display: none; color: red;" id="currentColorTester">tester for currentColor</div>

    <script type="text/javascript">
        // Some simple unit tests of color parsing
        var colorValueTests = {
                'aqua': '#00FFFF',
                'beige': '#F5F5DC',
                '#123456': '#123456',
                '#123': '#123',
                'rgb(0, 0, 255)': '#0000ff',
                'rgba(0, 0, 255, 0.5)': '#0000ff',
                'rgba(0, 0, 255, .5)': '#0000ff',
                'hsl(0, 100%, 50%)': '#ff0000',
                'hsla(0, 100%, 50%, 0.5)': '#ff0000',
                'hsla(0, 100%, 50%, .5)': '#ff0000',
                'currentColor': '#FF0000',
                'transparent': 'transparent'
            },
            hexValueTests = {
                'aqua': '#00FFFF',
                'beige': '#F5F5DC',
                '#123456': '#123456',
                '#123': '#112233',
                'rgb(0, 0, 255)': '#0000ff',
                'rgba(0, 0, 255, 0.5)': '#0000ff',
                'rgba(0, 0, 255, .5)': '#0000ff',
                'hsl(0, 100%, 50%)': '#ff0000',
                'hsla(0, 100%, 50%, 0.5)': '#ff0000',
                'hsla(0, 100%, 50%, .5)': '#ff0000',
                'currentColor': '#FF0000',
                'transparent': '#000000'
            },
            alphaTests = {
                'aqua': 1,
                'beige': 1,
                '#123456': 1,
                '#123': 1,
                'rgb(0, 0, 255)': 1,
                'rgba(0, 0, 255, 0.5)': 0.5,
                'rgba(0, 0, 255, .5)': 0.5,
                'hsl(0, 100%, 50%)': 1,
                'hsla(0, 100%, 50%, 0.5)': 0.5,
                'hsla(0, 100%, 50%, .5)': 0.5,
                'currentColor': 1,
                'transparent': 0
            },

            currentColorTester = document.getElementById('currentColorTester'),
            failed = false,
            c, val;
        for (c in colorValueTests) {
            val = PIE.getColor( c ).colorValue( currentColorTester );
            if ( val.toLowerCase() !== colorValueTests[ c ].toLowerCase() ) {
                document.write('<p style="color:red">PIE.Color#colorValue() failed for "' + c + '": got "' + val + '", expected "' + colorValueTests[c] + '"</p>')
                failed = true;
            }
        }
        for (c in hexValueTests) {
            val = PIE.getColor( c ).hexValue( currentColorTester );
            if ( val.toLowerCase() !== hexValueTests[ c ].toLowerCase() ) {
                document.write('<p style="color:red">PIE.Color#hexValue() failed for "' + c + '": got "' + val + '", expected "' + hexValueTests[c] + '"</p>')
                failed = true;
            }
        }
        for (c in alphaTests) {
            val = PIE.getColor( c ).alpha();
            if ( val !== alphaTests[ c ] ) {
                document.write('<p style="color:red">PIE.Color#alpha() failed for "' + c + '": got "' + val + '", expected "' + alphaTests[c] + '"</p>')
                failed = true;
            }
        }
        if (!failed) {
            document.write('<p style="color:#090">Color parsing tests all passed</p>')
        }


        // Visual test of color names
        var colors = ["aliceblue", "antiquewhite", "aqua", "aquamarine", "azure", "beige", "bisque", "black", "blanchedalmond", "blue", "blueviolet", "brown", "burlywood", "cadetblue", "chartreuse", "chocolate", "coral", "cornflowerblue", "cornsilk", "crimson", "cyan", "darkblue", "darkcyan", "darkgoldenrod", "darkgray", "darkgreen", "darkkhaki", "darkmagenta", "darkolivegreen", "darkorange", "darkorchid", "darkred", "darksalmon", "darkseagreen", "darkslateblue", "darkslategray", "darkturquoise", "darkviolet", "deeppink", "deepskyblue", "dimgray", "dodgerblue", "firebrick", "floralwhite", "forestgreen", "fuchsia", "gainsboro", "ghostwhite", "gold", "goldenrod", "gray", "green", "greenyellow", "honeydew", "hotpink", "indianred", "indigo", "ivory", "khaki", "lavender", "lavenderblush", "lawngreen", "lemonchiffon", "lightblue", "lightcoral", "lightcyan", "lightgoldenrodyellow", "lightgreen", "lightgrey", "lightpink", "lightsalmon", "lightseagreen", "lightskyblue", "lightslategray", "lightsteelblue", "lightyellow", "lime", "limegreen", "linen", "magenta", "maroon", "mediumauqamarine", "mediumblue", "mediumorchid", "mediumpurple", "mediumseagreen", "mediumslateblue", "mediumspringgreen", "mediumturquoise", "mediumvioletred", "midnightblue", "mintcream", "mistyrose", "moccasin", "navajowhite", "navy", "oldlace", "olive", "olivedrab", "orange", "orangered", "orchid", "palegoldenrod", "palegreen", "paleturquoise", "palevioletred", "papayawhip", "peachpuff", "peru", "pink", "plum", "powderblue", "purple", "red", "rosybrown", "royalblue", "saddlebrown", "salmon", "sandybrown", "seagreen", "seashell", "sienna", "silver", "skyblue", "slateblue", "slategray", "snow", "springgreen", "steelblue", "tan", "teal", "thistle", "tomato", "turquoise", "violet", "wheat", "white", "whitesmoke", "yellow", "yellowgreen"];
        for( var i=0, len=colors.length; i < len; i++ ) {
            document.write('<div class="test" id="test' + i + '" style="border-color:' + colors[i] + ';">' + colors[i] + '</div>');
            PIE.attach( document.getElementById('test' + i) );
        }
    </script>

</body>
</html>